import React, { useState, useMemo, useEffect } from 'react'
import { Popup, Cell, Card, Image, Button, Toast, Space, Stepper, } from 'react-vant'
import Swipers from './Swiper'
import { useSelector, useDispatch } from 'react-redux'
import { Arrow, Like } from '@react-vant/icons'
import '../App.css'
import { async_addcarlist, async_updateshoplist } from '../store/Slice'




export default function Popups(props) {

    //获取数据
    let obj = useSelector(state => state.crms1)
    // console.log(obj);
    let dispatch = useDispatch()

    /* 通过id获取对应的数据 */
    let total = useMemo(() => {
        let id = props.itemobj.id
        return obj.shoplist.find(item => {
            if (item.id == id) {
                return item
            }
        })
    }, [obj.shoplist, props.itemobj.id])
    // console.log(total);

    /* 轮播图数据 */
    let [swiper, setSwiper] = useState(
        ['/img/1.jpg', '/img/2.jpg', '/img/3.jpg', '/img/4.jpg', '/img/5.jpg']
    )

    /* 数据 */
    let [gaol, setGaol] = useState([
        { title: '纸吸管-口感略有影响' },
        { title: '常规吸管' }
    ])
    let [index, setIndex] = useState(0)



    return (
        <div style={{ height: '60vh' }}>
            <Popup
                visible={props.showCloseIcon}
                closeable
                style={{ height: '80%' }}
                position='bottom'
                onClose={() => { props.setShowCloseIcon(false) }}
            >
                <Swipers swiper={swiper}></Swipers>
                {/* 详情页信息 */}
                <Card round style={{ marginBottom: 20 }}>
                    <Card.Cover>

                    </Card.Cover>
                    <Card.Header
                        extra={<Arrow />}>
                        {total?.title}
                    </Card.Header>
                    <Card.Body>
                        产品描述:{total?.jianjie}
                    </Card.Body>

                    <div style={{ padding: '12px' }}>
                        <h4>0糖0卡</h4>
                        <div style={{ width: '50px' }} className={total?.tang ? 'nan' : 'nonan'}
                            onClick={() => {
                                let obj = {
                                    ...total,
                                    tang: !total?.tang
                                }
                                //调用方法
                                dispatch(async_updateshoplist(obj))

                            }}>
                            0糖0卡
                        </div>
                        <h4>绿色喜茶-应环保条例-我们不在主动提供塑料餐具</h4>
                        <div style={{ margin: '10px 0', }}>
                            <Space>
                                {
                                    gaol.map((item, indexs) => {
                                        return <Button type={index == indexs ? 'warning' : 'default'}
                                            size='small'
                                            onClick={() => {
                                                setIndex(indexs)
                                            }}>
                                            {item.title}
                                        </Button>
                                    })
                                }
                            </Space>
                        </div>
                        {/* 步进器 */}
                        <div>数量:
                            <Stepper
                                min={0}
                                value={total?.num}
                                onChange={(v) => {
                                    //执行编辑的方法
                                    let obj = {
                                        ...total,
                                        num: v
                                    }
                                    dispatch(async_updateshoplist(obj))
                                }}
                            />
                        </div>
                    </div>

                    {/* 提交订单 */}
                    <Card.Footer>
                        <Button
                            icon={<Like />}
                            color='linear-gradient(to right, #ff6034, #ee0a24)'
                            size='small'
                            block
                            onClick={() => {
                                let obj = {
                                    ...total
                                }
                                //执行添加的方法
                                dispatch(async_addcarlist(obj))
                            }}
                        >
                            加入购物车
                        </Button>
                    </Card.Footer>
                </Card>
            </Popup>
        </div >

    )
}
